<template>
  <div class="personalCenterContainer">
    <div class="personalCenterContent">
      <div class="left">
        <div class="title">{{t('personalCenter', '编辑信息')}}</div>
				<div class='customItem'>
					<div class="label">{{t('personalCenter', '手机号')}}</div>
					<a-input class="value" v-model:value="userData.mobile" :placeholder="t('common', '请输入')" style='max-width: 400px;' />
				</div>
				<!-- <div class='customItem'>
					<div class="label">{{t('personalCenter', '邮箱')}}</div>
					<a-input class="value" v-model:value="userData.mobile" :placeholder="t('common', '请输入')" style='max-width: 400px;' />
				</div> -->
				<div class='customItem'>
					<div class='label'>{{t('personalCenter', '方向')}}</div>
					<a-input class="value" v-model:value="userData.orientation" :placeholder="t('common', '请输入')" style='max-width: 400px;' />
				</div>
				<div class='customItem'>
					<div class='label'>{{t('personalCenter', '自我介绍')}}</div>
					<a-textarea class="value" v-model:value="userData.introduceYourself" :placeholder="t('common', '请输入')" :rows="4"
						style='max-width: 400px;' />
				</div>

				<div class="btnBox">
      <a-button @click="cancel">{{t('common', '取消')}}</a-button>
      <a-button type="primary" @click="save">{{t('common', '保存资料')}}</a-button>
    </div>
      </div>
      <div class="right">
				<div class="info">
					<div class="avatar">
						<img :src="userData.avatarUrl || avatar" alt="">
					</div>
					<minFile @handleReadFile="handleReadFile">
						<div class="edit">{{t('common', '编辑')}}</div>
					</minFile>
					
				</div>
				<div class="name">{{userData.name||''}}</div>
				<div class="btn" @click="handleClick({name: '修改密码'})">{{t('personalCenter', '修改密码')}}</div>
			</div>
    </div>

    <a-modal
      v-model:open="editPasswordOpen"
      :title="t('modal', '修改密码')"
      @cancel="editPasswordOpen = false"
      @ok="submit"
    >
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        :rules="rules"
        ref="formRef"
				@validate="handleValidate"
        @submit="submit"
      >
        <a-form-item has-feedback name="oldPassword">
          <a-input-password
            v-model:value="formState.oldPassword"
            type="password"
            :placeholder="t('modal', '请输入旧密码')"
          />
        </a-form-item>
        <a-form-item has-feedback name="newPassword">
          <a-input-password
            v-model:value="formState.newPassword"
            type="password"
            autocomplete="off"
            :placeholder="t('modal', '请输入新密码')"
          />
        </a-form-item>
        <a-form-item has-feedback name="verifyPassword">
          <a-input-password
            v-model:value="formState.verifyPassword"
            type="password"
            autocomplete="off"
            :placeholder="t('modal', '请再次输入新密码')"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import avatar from '@/assets/user.png';
import { ref, reactive, onActivated } from 'vue'
import { useRoute } from 'vue-router'
import { modifyPassword }  from '@/request/login.js'
import {
  modifyStudentInformation,
  getStudentInformation,
  getTeacherInformation,
  modifyTeacherInformation,
	uploadAvatar
} from '@/request/personalCenter.js'
import {
		message
	} from 'ant-design-vue';
import minFile from '@/components/common/minFile.vue'
import { setUserInfo } from '@/stores/info'
import { t } from '@/i18n'
const formRef = ref(null)
const userData = ref({})
const userData2 = ref({})

const editPasswordOpen = ref(false)
const formState = ref({})
//两次密码校验
const validatePass = async (_rule, value) => {
  if (!value) {
    return Promise.reject(t('login', '请输入密码'))
  } else if (value.length < 6 || value.length > 16) {
    return Promise.reject(t('login', '密码长度必须在6-16位之间'))
  }
  else {
    return Promise.resolve()
  }
}

const validatePass2 = async (_rule, value) => {
  if (!value) {
    return Promise.reject(t('personalCenter', '请再次输入密码'))
  } else if (value !== formState.value.newPassword) {
    return Promise.reject(t('personalCenter', '两次密码不匹配'))
  } else {
    return Promise.resolve()
  }
}
const rules = {
  oldPassword: [
    {
      trigger: 'change',
      validator: validatePass,
    },
  ],
  newPassword: [
    {
      validator: validatePass,
      trigger: 'change',
    },
  ],
  verifyPassword: [
    {
      validator: validatePass2,
      trigger: 'change',
    },
  ],
}
const handleValidate = (...args) => {
  console.log(args);
}
const handleReadFile = async (e) => {
  if (e.message) return message.error(e.message)
  let res = await uploadAvatar({ file: e.file })
  if (!res) return
  message.success(t('common', '上传成功'))
  userData.value['avatarUrl'] = res.data
	setUserInfo({avatarUrl: res.data})
}
const show = async() => {
	let res = await getTeacherInformation()
	if (res&&res.code == 200) {
		userData.value = {...res.data}
		userData2.value = {...res.data}
	}
}
	console.log('???')
	show()


function cancel() {
	userData.value = {...userData2.value}
}
const handleClick = ({name}) =>{
	switch (name) {
		case '修改密码':
			formState.value = {}
			editPasswordOpen.value = true
			formRef.value?.resetFields()
			break
	}
}
//点击修改密码按钮
async function submit() {
	let v = await formRef.value.validate().catch((err) => false)
  if (!v) return message.error(t('common', '请检查表单数据'))
  let data = {}
  let res = await modifyPassword(formState.value)
  if (res && res.code && res.code == 200) {
    message.success(res.data ? res.data.message : t('common', '密码修改成功'))
    editPasswordOpen.value = false
  } else {
    message.error(res.data ? res.data.message : t('common', '密码修改失败，请重试'))
    editPasswordOpen.value = false
  }
}

async function save() {
	delete userData?.value?.avatar
	delete userData?.value?.avatarUrl
		let res = await modifyTeacherInformation(userData.value);
		if (res&&res.code == 200) {
			message.success(t('common', '信息修改成功'))
			await show()
		}
	}
</script>

<style lang="scss">
.personalCenterContainer {
  /* height: 100%; */
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px #e3e2ff;
  border-radius: 10px;
  padding: 24px;
  align-items: flex-end;
  .personalCenterContent {
    flex-grow: 1;
		align-self: stretch;
			display: flex;
		.left {
			width: 400px;

			display: flex;
			flex-direction: column;
			gap: 18px;
			.item {
				display: flex;
				align-items: center;
				.label {
					font-weight: 400;
					font-size: 14px;
					color: rgba(0,0,0,0.85);
					margin-right:10px;
				}
			}
			.customItem {
				display: flex;
				flex-direction: column;
				.label {
					font-weight: 400;
					font-size: 14px;
					color: rgba(0,0,0,0.85);
				}
				.value {
					margin-top: 10px;
				}
			}
			
		}
		.right {
			width: 400px;
			display: flex;
			align-items: center;
			padding-top: 50px;
			flex-direction: column;
			.info {
				width: 106px;
				height: 106px;
				display: flex;
					flex-direction: column;
					align-items: center;
				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;

					img {
						width: 100%;
						height:100%;
						object-fit: cover;
					}
				}
				
				.edit {
					margin-top: -10px;
					width: 40px;
					height: 18px;
					background: rgba(0,0,0,0.63);
					border-radius: 9px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 12px;
					color: #FFFFFF;
					cursor: pointer;

				}
			}
			.name {
				margin-top: 15px;
				font-weight: 500;
				font-size: 20px;
				color: rgba(0,0,0,0.85);
			}
			.btn {
				cursor: pointer;
				margin-top: 8px;
				min-width: 60px;
				padding: 0 6px;
				height: 26px;
				background: #EEEEFF;
				border-radius: 6px;
				border: 1px solid #D7D5FF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 12px;
				color: #8466F5;
			}
		}

  }
  .btnBox {
		margin-top: 20px;
    width: 180px;
    display: flex;
    justify-content: space-between;
  }
}
.title {
  font-weight: 500;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 28px;
  text-align: left;
  font-style: normal;
}
</style>
